<template>
    <a-modal
            :title="tableTitle"
            :visible="visible"
            width="1200px"
            @ok="handleOk"
            :confirmLoading="confirmLoading"
            :maskClosable="false"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="form">
            <a-card :title="columns.name" v-for="(columns,columnsIndex) in formData" :key="columnsIndex" >
                <a-descriptions bordered :column="column">
                    <a-descriptions-item
                            :label="item.title"
                            :key="index"
                            v-for="(item,index) in columns.data"
                             :span="item.span || 1"
                    >
                        <a-form-model-item
                                :prop="item.dataIndex"
                                :key="index"
                                :rules="{
                                required: getRequird(item.required),
                                message: '请输入'+item.title,
                                trigger: 'change',
                            }">
                            <a-input
                                    :maxLength="100"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='input'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input>

                            <xlPassword
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='input.password'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </xlPassword>

                            <a-input-number
                                    :min="0"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='input.number'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input-number>

                            <a-input-number
                                    :min="0"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='input.money'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input-number>

                            <a-textarea
                                    :maxLength="100"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='textarea'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-textarea>

                            <a-select
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='select'"
                                    v-model="form[item.dataIndex]"
                                    :placeholder="'请输入'+item.title"
                                    showSearch
                                    allowClear
                                    @change="(e)=>{
                                        if(item.conditionF && e == item.conditionF.clearValue){
                                            form[item.conditionF.clearKey] = ''
                                        }
                                    }"
                                    >
                                <a-select-option :value="item2.dataValue || item2.codeMasterValue" :key="index2"
                                                 v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                    {{item2.dataName || item2.codeMasterName}}
                                </a-select-option>
                            </a-select>

                            <xlDate
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='date'"
                                    :placeholder="item.title"
                                    :dataType="item.typeData || 'date'"
                                    v-model="form[item.dataIndex]">
                            </xlDate>

                            <div class="xl-dateRange" v-if="item.type=='dateRange'">
                                <xlDate class="xl-dateRange-start"
                                        :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                        :dataType="item.typeData.type || 'date'"
                                        placeholder="开始日期"
                                        v-model="form[item.typeData.startDate]">
                                </xlDate>
                                <xlDate class="xl-dateRange-end"
                                        :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                        :dataType="item.typeData.type || 'date'"
                                        placeholder="结束日期"
                                        v-model="form[item.typeData.endDate]">
                                </xlDate>
                            </div>

                            <xlImages
                                    v-if="item.type=='upload'"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-model="form[item.dataIndex]"
                                    name="file"
                                    accept=".jpg, .jpeg, .png"
                                    :max="1"
                            >
                            </xlImages>
                            <xluploadFile
                                    v-if="item.type=='upload.file'"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-model="form[item.dataIndex]"
                                    :title-visible="item.fileTitle?item.fileTitle.titleVisible: false"
                                    :title="item.fileTitle?item.fileTitle.title:''"
                            >

                            </xluploadFile>
                            <ueditor
                                    v-if="item.type=='editor'"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-model="form[item.dataIndex]"
                            >
                            </ueditor>
                            <xlNameFile
                                    v-else-if="item.type=='upload.name'"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-model="model[item.dataIndex]"
                                    :file-path="item.typeData.filePath"
                                    :file-name="item.typeData.fileName"
                                    :del-visible="false"
                            >
                            </xlNameFile>
                            <assignSelect
                                    v-if="item.type=='assignSelect'"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-model="form[item.dataIndex]"
                                    :select-name="item.typeData.selectName"
                                    :select-value="item.typeData.selectValue"
                                    :url="item.typeData.url"
                                    :params="item.typeData.params"
                                    :filters="item.typeData.filters"
                                    :formType="type"
                                    @assignForm="assignForm"
                                    :placeholder="item.title"
                                    ref="assignSelect"
                            >

                            </assignSelect>
                            <a-radio-group
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    v-if="item.type=='radio'"
                                    v-model="form[item.dataIndex]"
                                    @change="(e)=>{
                                        if(item.conditionF && e == item.conditionF.clearValue){
                                            form[item.conditionF.clearKey] = ''
                                        }
                                    }"
                                    >
                                <a-radio
                                        :value="item2.dataValue == false? item2.dataValue: item2.dataValue|| item2.codeMasterValue"
                                        :key="index2"
                                        v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                            {{item2.dataName || item2.codeMasterName}}
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-card>
        </a-form-model>
    </a-modal>
</template>

<script>
    import xlDate from '../formUntil/xlDate'
    import ueditor from '../ueditor'
    import xlPassword from '../formUntil/xlPassword'
    import xluploadFile from '../formUntil/xluploadFile'
    import xlImages from '../formUntil/xlImages'
    import xlNameFile from '../formUntil/xlNameFile'
    import assignSelect from '../formUntil/assignSelect'

    export default {
        name: "xlForm",
        data() {
            return {
                tableTitle: '标题',
                visible: false,
                confirmLoading: false,
                form: {},
                formData: [],
                type: 1
            }
        },
        components: {
            xlDate,
            xlImages,
            xlPassword,
            xluploadFile,
            ueditor,
            xlNameFile,
            assignSelect
        },
        props:{
            column:{
                type:Number,
                default:2
            }
        },
        methods: {
            assignForm(form) {
                this.form = Object.assign({}, form)
            },
            handleOk() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.confirmLoading = true
                        this.$emit('handleOk', this.form)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancel() {
                this.visible = false
            },
            formatData(columns) {
                this.$nextTick(_ => {
                    this.$refs.form.resetFields();
                })
                this.formData = []
                columns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && !item.formVisible) {
                        let stack = this.formData.filter(formData => formData.name == item.stack)
                        console.log(stack)
                        if (stack.length) {
                            stack[0].data.push(item)
                        } else {
                            this.formData.push({
                                name: item.stack,
                                data: [
                                    item
                                ]
                            })
                        }

                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
                console.log(this.formData)
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && !item.formVisible) {
                        let stack = this.formData.filter(formData => formData.name == item.stack)
                        if (stack.length) {
                            stack[0].data.push(item)
                        } else {
                            this.formData.push({
                                name: item.stack,
                                data: [
                                    item
                                ]
                            })
                        }

                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            formatForm(form) {
                delete form.createDateTime
                delete form.modifyDateTime
                delete form.modifyBy
                delete form.createBy
                //整理字段数据 ／ 赋值 清空等
                this.$nextTick(_ => {
                    this.$refs.form.resetFields();
                    this.form = {}
                    this.form = Object.assign({}, form)
                })
            },
            getRequird(value) {
                let data = value
                if (data == undefined) {
                    return true
                } else {
                    return data
                }
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    .ant-card {
        margin-bottom: 10px;
    }

    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /deep/ .ant-input-number {
        width: 100%;
    }
    /deep/ .ant-descriptions-item-content {
        padding: 8px;
    }
</style>
